<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-01 18:50:20
 * 天凉好个秋
-->
<template>
    <!-- 窗口控制区域 -->
    <div class="windowControl" v-show="isElectron">
        <ul class="flex items-center justify-evenly">
            <li :title="t('navbar.window.mini')" @click="toggleMini">
                <img src="@/assets/imgs/mini-mode.png" alt="迷你窗口" />
            </li>
            <li :title="t('navbar.window.minimize')" @click="minimize">
                <img src="@/assets/imgs/sub.png" alt="最小化" />
            </li>
            <li :title="t('navbar.window.maximize')" @click="maximize" v-show="!isFullScreen">
                <img src="@/assets/imgs/full-screen.png" alt="最大化" />
            </li>
            <li :title="t('navbar.window.unmaximize')" @click="unmaximize" v-show="isFullScreen">
                <img src="@/assets/imgs/mid-screen.png" alt="向下还原" />
            </li>
            <li :title="t('navbar.window.close')" @click="closeWindow">
                <img src="@/assets/imgs/close.png" alt="关闭" />
            </li>
        </ul>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import config from '@/config/config';
import { usePlayStore } from '@/store/play'
import { useI18n } from '@/hooks/locales/useI18N'

//@ts-ignore
const ipcRenderer = window.ipcRenderer;
const isElectron = config.isElectron  //是否在electron环境
const { t } = useI18n()
const playStore = usePlayStore()

const isFullScreen = ref(false) //是否处于全屏模式

// 监听窗口变化
if (isElectron && ipcRenderer) {
    ipcRenderer.on('isFullScreen', (event: any, arg: boolean) => {
        isFullScreen.value = arg
    })
}
// 切换迷你模式
const toggleMini = () => {
    ipcRenderer.send('toggle-mini', true)
}
// 最小化
const minimize = () => {
    ipcRenderer.send('minimize', '最小化')
}
// 最大化窗口
const maximize = () => {
    ipcRenderer.send('maximize', '最大化')
}
// 取消窗口最大化
const unmaximize = () => {
    ipcRenderer.send('unmaximize', '取消窗口最大化')
}
// 关闭程序
const closeWindow = () => {
    ipcRenderer.send('closemainWindowdow', '关闭程序')
    playStore.toggleIsPlaying(false)
}
</script>

<style scoped lang='scss'>
.windowControl {
    @apply select-none;
    width: 165px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    -webkit-app-region: no-drag;
    img {
        &:nth-child(1) {
            width: 20px;
        }
        &:nth-child(2) {
            width: 18px;
        }
        &:nth-child(3) {
            width: 16px;
        }
        &:nth-child(4) {
            width: 16px;
        }
        &:nth-child(5) {
            width: 18px;
        }
    }
}
</style>